<script setup>
import { ref } from 'vue';
import { Search, Cell, CellGroup, Button, Icon } from 'vant';

const searchValue = ref('');
const helpCategories = [
  { id: 1, title: '账号问题', icon: 'user-o', color: '#3491fa' },
  { id: 2, title: '词条相关', icon: 'star-o', color: '#ff9500' },
  { id: 3, title: '积分问题', icon: 'gold-coin-o', color: '#00c853' },
  { id: 4, title: '小鸡商城', icon: 'shopping-cart-o', color: '#ff5252' },
  { id: 5, title: '社区互动', icon: 'friends-o', color: '#7c4dff' },
  { id: 6, title: '其他问题', icon: 'more-o', color: '#78909c' }
];

const hotQuestions = [
  { id: 1, title: '如何修改密码？' },
  { id: 2, title: '如何创建新词条？' },
  { id: 3, title: '积分有什么用？' },
  { id: 4, title: '如何联系客服？' },
  { id: 5, title: '词条审核需要多长时间？' }
];

const onSearch = () => {
  if (searchValue.value) {
    ElMessage.info(`搜索: ${searchValue.value}`);
  }
};

const cancel = () => {
  ElMessage({
    message:"功能开发中....",
    type:"warning",
    duration:2000
  });
};

</script>

<template>
  <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
      safe-area-inset-top
  />
  <div class="help-center" @click="cancel">
    <!-- 搜索区域 -->
    <div class="search-section">
      <h2 class="search-title">需要帮助？</h2>
      <p class="search-subtitle">输入关键词查找帮助内容，如"账号"、"积分"、"词条"等</p>
    </div>

    <!-- 帮助分类 -->
    <div class="help-categories">
      <h3 class="section-title">
        <Icon name="apps-o" style="margin-right: 8px;" />
        帮助分类
      </h3>
      <CellGroup :border="false">
        <Cell
            v-for="category in helpCategories"
            :key="category.id"
            :title="category.title"
            :icon="category.icon"
            is-link
            :style="{ '--van-cell-icon-color': category.color }"
        />
      </CellGroup>
    </div>

    <!-- 热门问题 -->
    <div class="hot-questions">
      <h3 class="section-title">
        <Icon name="fire-o" style="margin-right: 8px;" />
        热门问题
      </h3>
      <CellGroup :border="false">
        <Cell
            v-for="question in hotQuestions"
            :key="question.id"
            :title="question.title"
            icon="question-o"
            is-link
            :style="{ '--van-cell-icon-color': '#ff9500' }"
        />
      </CellGroup>
    </div>

    <!-- 联系客服 -->
    <div class="contact-section">
      <h3 class="contact-title">需要更多帮助？</h3>
      <p class="contact-desc">
        如果以上内容未能解决您的问题，您可以随时联系我们的客服团队。<br>
        我们的客服人员将竭诚为您服务。
      </p>
      <Button
          round
          type="primary"
          color="linear-gradient(135deg, #ff9500, #ff7a00)"
          size="large"
          icon="service-o"
          @click="contactCustomerService"
      >
        联系客服
      </Button>
    </div>
  </div>
</template>

<style scoped>
.help-center {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f6f8fa;
  min-height: 100vh;
}

.search-section {
  background: linear-gradient(135deg, #ff9500, #ff7a00);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  text-align: center;
  color: white;
  box-shadow: 0 4px 20px rgba(255, 157, 0, 0.25);
}

.search-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
}

.search-subtitle {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 20px;
}

.help-categories,
.hot-questions {
  background: white;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
  display: flex;
  align-items: center;
}

.contact-section {
  background: white;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.contact-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

.contact-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 24px;
}

:deep(.van-search__content) {
  background: rgba(255, 255, 255, 0.2) !important;
}

:deep(.van-field__control) {
  color: white !important;
}

:deep(.van-field__control::placeholder) {
  color: rgba(255, 255, 255, 0.7) !important;
}

:deep(.van-cell) {
  padding: 16px 0;
}

:deep(.van-cell:not(:last-child)::after) {
  left: 0;
  right: 0;
}
</style>